<template>
	<view class="chat">
		<view fixed placeholder title="聊天内容" left-arrow></view>
		<view id="content" ref="rightBody">
			<view v-for="item in list" :key="item.id">
				<view class="chat-model" v-if="item.isSelf">
					<view>
						<u-image :showLoading="true" shape="circle"
							src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" width="3rem"
							height="3rem" @click="click"></u-image>
					</view>
					<view class="chat-content chat-content-l">
						{{item.msg}}
					</view>
				</view>
				<view class="chat-model" style="justify-content: flex-end" v-else>
					<view class="chat-content chat-content-r">
						{{item.msg}}
					</view>
					<view>
						<u-image :showLoading="true" shape="circle" src="https://img01.yzcdn.cn/vant/cat.jpeg"
							width="3rem" height="3rem" @click="click"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view id="bottom">
			<input type="text" v-model="text" />
			<button @click="onSend">发送</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'HelloWorld',
		data() {
			return {
				path: "ws://185.232.92.15:3433/myHandler/",
				// path: "ws://127.0.0.1:3433/myHandler/", // socket 地址
				socketOpen: false,
				socketMsgQueue: [],
				text: '',
				receiverType: "user",
				data: {
					code: 9002,
					msg: '',
					recId: '',
				},
				list: [],
				time: '', // 定时器
				admin: false
			}
		},
		created() {
			this.init()
		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		methods: {
			onSend() {
				if (!this.socketOpen) {
					uni.showToast({
						title: '连接失败请重新进入',
						icon: 'none'
					});
					return;
				}
				if (!this.text) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
					return;
				}
				var data = {
					avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
					msg: this.text,
					isSelf: false
				}
				this.list.push(data);
				this.send(this.text);
				this.text = '';
				// 滚动到底部
				this.$nextTick(() => {
					this.$refs.rightBody.scrollTop = this.$refs.rightBody.scrollHeight;
				});
			},
			init() {

				uni.connectSocket({
					url: this.path + '?userId=' + this.userId + "&admin=" + this.admin,
					success: () => {
						uni.showToast({
							title: '连接成功',
							icon: 'none'
						});
						this.socketOpen = true;
						// 发送之前的消息队列
						for (let msg of this.socketMsgQueue) {
							this.sendSocketMessage(msg);
						}
						this.socketMsgQueue = [];
					},
					fail: () => {
						uni.showToast({
							title: '连接失败',
							icon: 'none'
						});
					}
				});
				uni.onSocketMessage(res => {
					this.getMessage(res);
				})
			},
			getMessage(res) {

				let t = JSON.parse(res.data);
				console.log(t.msg);
				var data = {
					avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
					msg: t.msg,
					isSelf: true
				}
				// if (t.code == 9002) {
				this.list.push(data);
				// }
				this.data.recId = t.recId;
				// 滚动到底部
				this.$nextTick(() => {
					this.$refs.rightBody.scrollTop = this.$refs.rightBody.scrollHeight;
				});
			},
			send(msg) {
				this.data.code = 9002;
				this.data.msg = msg;
				this.data.receiverType = this.receiverType;
				this.data.userId = this.userId;
				this.data.username =this.userInfo.username;
				this.sendSocketMessage(JSON.stringify(this.data));
			},
			sendSocketMessage(msg) {
				if (this.socketOpen) {
					uni.sendSocketMessage({
						data: msg
					});
				} else {
					this.socketMsgQueue.push(msg);
				}
			},
			close() {
				console.log("socket已经关闭");
			}
		},
		destroyed() {
			uni.closeSocket({
				success: () => {
					console.log('WebSocket连接已关闭');
				}
			});
		}
	}
</script>

<style>
	.chat {
		height: 100vh;
		background-color: #e6e6e7;
	}

	#content {
		overflow: auto;
		height: 100vh;
		padding-bottom: 100px;
		background-color: #ececec;
	}

	#bottom {
		position: fixed;
		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		padding: 10px 0px;
		background-color: #e5e5ea;
	}

	#bottom input {
		background-color: white;
		width: 72%;
		height: 30px;
		padding: 3px 5px;
		vertical-align: sub;
		border-style: none;
		border-radius: 5px;
	}

	#bottom button {
		height: 32px;
		line-height: 32px;
		background-color: rgb(245, 158, 1);
		border-radius: 5px;
		color: #fff;
	}

	.chat-model {
		display: flex;
		flex-direction: row;
		margin: 10px 10px;
		margin-top: 30px;
		align-items: center;
	}

	.chat-content {
		position: relative;
		max-width: 67%;
		word-break: break-all;
		word-wrap: break-word;
		top: 18px;
		padding: 10px;
		border-radius: 5px;
		background-color: white;
	}

	.chat-content-r {
		right: 10px;
	}

	.chat-content-l {
		left: 10px;
	}
</style>